import { v4 as uuidv4 } from 'uuid'
export default {
  data() {
    return {
      windowSize: [0, 0],
      chartId: `echart-line-${uuidv4()}`, // 用UUID生成图表id，防止id重复
      chart: { map: null, chartData: [] },
      chartColors: [], // 自定义图列颜色集合
      echartOption: {
        title: {
          text: '饼-圆角环形图',
          show: false
        },
        color: [
          '#16BC83',
          '#FEB81D',
          '#FF8A8A',
          '#4FD8D3',
          '#73A0FA',
          '#5FBCFF'
        ], // 绿黄红、浅蓝、浅紫、蓝
        tooltip: {
          trigger: 'item',
          textStyle: {
            color: '#333333',
            fontFamily: 'PFZH',
            fontSize: 12,
            lineHeight: 26
          },
          extraCssText: 'z-index: 9' // 设置层级
          /* formatter(params) {
            let tipMsg = `时间: ${params[0].name}<br>`
            // const color = ['color-green', 'color-yellow', 'color-blue', 'color-red']
            for (const i in params) {
              const item = params[i]
              // class='${color[i]}'
              tipMsg += `${item.seriesName}: <span style="color:${item.color}">${_this.foramtThousand(Number(item.data).toFixed(2))}</span> <br>`
            }
            return `<div class="echart-tooltip-content">${tipMsg}</div>`
          } */
        },
        legend: {
          // data: [], // ['今年', '去年'],
          show: true,
          /* orient: 'vertical',
          right: 0,
          top: 20,
          bottom: 20, */
          top: 0,
          left: 0,
          lineStyle: {
            opacity: 0
          },
          textStyle: {
            color: '#888888',
            fontFamily: 'PFZH'
          }
        },
        series: []
      },
      seriesItem: {
        name: '产线占比',
        type: 'pie',
        /* radius: ['50%', '80%'],
        center: ['35%', '50%'], */
        radius: ['30%', '50%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 1,
          borderColor: '#fff',
          borderWidth: 2
        },

        /* labelLine: {
          show: false
        },
       label: { // 饼图图形上的文本标签
          normal: {
            show: true,
            position: 'inner', // 标签的位置
            textStyle: {
              fontWeight: 800,
              fontSize: 14, // 文字的字体大小
              color: '#FFFFFF'
            },
            formatter: '{c}'
          }
        }, */

        labelLine: {
          length: 4
        },
        label: {
          // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  ',
          formatter: '{a|{b}}{abg|}\n{hr|}\n{b|{c}}',
          // backgroundColor: '#FFFFFF',
          borderColor: '#8C8D8E',
          borderWidth: 0,
          borderRadius: 0,
          rich: {
            a: {
              color: '#333333',
              fontWeight: 'bold',
              lineHeight: 22,
              align: 'center',
              padding: 10
            },
            hr: {
              borderColor: '#CCCCCC',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#333333',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33,
              align: 'center'
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold',
            fontFamily: 'PFZH'
          }
        },
        data: []
      }
    }
  },
  created() {
    if (this.chartColors && this.chartColors.length) {
      this.$set(this.echartOption, 'color', this.chartColors)
    }
    if (this.legendData && this.legendData.length) {
      const seriesConfig = []
      this.legendData.forEach((name, index) => {
        const color = this.echartOption.color[index] || '' // 颜色
        const tooltip = {
          ...this.seriesItem.tooltip,
          ...{ textStyle: { color }}
        }
        const seriesItem = { ...this.seriesItem, ...{ name, tooltip }}
        seriesConfig.push(seriesItem)
      })
      this.$set(this.echartOption, 'series', seriesConfig)
      // this.$set(this.echartOption.legend, 'data', this.legendData)
    }
  },
  watch: {
    windowSize(val, oldVal) {
      this.chart.map.resize()
    }
  },
  mounted() {
    this.initChart()
    this.$nextTick(() => {
      this.drawChart()
    })
  },
  methods: {
    initChart() {
      this.windowSize = [
        document.body.clientWidth,
        document.body.clientHeight
      ]
      window.addEventListener('resize', () => {
        this.windowSize = [
          document.body.clientWidth,
          document.body.clientHeight
        ]
      })
      this.chart.map = this.$echarts.init(
        document.getElementById(this.chartId)
      )
      window.onresize = () => {
        this.chart.map.resize()
      }
    },
    async drawChart() {
      if (this.chart.map) {
        this.chart.map.dispatchAction({
          type: 'hideTip'
        })
      }
      this.chart.map.showLoading({
        color: '#12B9A3',
        fontFamily: 'PFZH',
        textColor: '#CCCCCC',
        fontSize: 14,
        lineWidth: 2
      }) // loading样式
      await this.getChartData()
      this.chart.map.hideLoading() // 隐藏loading样式
      const chartData = this.chart.chartData

      // 模拟延迟加载数据
      const option = this.echartOption // JSON.parse(JSON.stringify(this.echartOption))

      // 设置数据
      for (const i in chartData.seriesData) {
        option.series[i].data = chartData.seriesData[i]
      }
      this.chart.map.clear()
      this.chart.map.setOption(option)
      this.$nextTick(() => {
        setTimeout(() => {
          this.chart.map.resize()
        }, 300)
      })

      // 高亮时触发
      this.chart.map.on('highlight', (params) => {
        if (params && params.batch && params.batch.length) {
          const batchItem = params.batch[0]
          const xIndex = batchItem.dataIndex
          this.getxAxisSelectData && this.getxAxisSelectData(xIndex)
        }
      })
    }
  }
}
